<template>
  <div class="app-container">
    <upload-excel-component @on-selected-file='selected'></upload-excel-component>
    <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary"
               v-waves icon="el-icon-upload2" @click="importData" :disabled="importAble">导入</el-button>
    <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
      <el-table-column v-for='item of tableHeader' :prop="item" :label="item" :key='item'>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { orderImport } from '@/api/outbound/outOrderImport'
  import UploadExcelComponent from '@/components/UploadExcel/index.vue'
  import waves from '@/directive/waves'
  export default {
    name: 'uploadExcel',
    directives: {
      waves
    },
    components: { UploadExcelComponent },
    data() {
      return {
        tableData: [],
        tableHeader: [],
        importAble: false
      }
    },
    methods: {
      selected(data) {
        this.tableData = data.results
        this.tableHeader = data.header
      },
      importData() {
        // 确定导入
        this.importAble = true
        orderImport(this.tableHeader, this.tableData).then(result => {
          this.importAble = false
          if (result.code === 0) {
//            this.$data.writeOff = result.data
            this.tableHeader = result.data.header
            this.tableData = result.data.rows
          } else {
            this.$notify({
              title: '信息提示',
              message: result.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      }
    }
  }
</script>
